<template>
  <div class="home">
    <el-table :data="tableData">
      <el-table-column prop="id" label="ID" width="100">
      </el-table-column>
      <el-table-column prop="firstName,lastName" label="Name" width="300">
        <template slot-scope="scope">
          {{scope.row.firstName}} {{scope.row.lastName}}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="Address" width="300">
      </el-table-column>
      <el-table-column prop="city" label="City" width="200">
      </el-table-column>
      <el-table-column label="Manage">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" @click="showEdit(scope.row)" circle></el-button>
          <el-button type="danger" icon="el-icon-delete" @click="showDelete(scope.row)" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" class="row-bg" justify="center">
      <el-pagination background layout="prev, pager, next" :page-size="pageSize"
                     :total="total" @current-change="page"></el-pagination>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      pageSize: 1,
      total: 1,
    }
  },
  methods: {
    // 编辑
    showEdit(row) {
      let _this = this
      this.$confirm('You really want to edit this data?', 'Message', {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(() => {
        _this.$router.push({ name: 'Update', params: { id: row.id } })
      }).catch(() => {})
    },
    // 删除
    showDelete(row) {
      let _this = this
      this.$confirm('You really want to delete this data?', 'Message', {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(() => {
        this.$axios.delete("http://localhost:9000/person/" + row.id).then(res=>{
          _this.$alert('Delete successfully!', 'Message', {
            confirmButtonText: 'OK',
            callback: action => {
              // 刷新页面
              _this.$router.go(0)
            }
          })
        })
      }).catch(() => {})
    },
    // 分页
    page(currentPage) {
      const _this = this
      this.$axios.get("http://localhost:9000/person/" + (currentPage-1) + "/6").then(res=>{
        _this.tableData = res.data.content
        _this.pageSize = res.data.size
        _this.total = res.data.totalElements
      })
    },
  },
  // 初始化加载数据
  created() {
    const _this = this
    this.$axios.get("http://localhost:9000/person/0/6").then(res=>{
      console.log(res.data)
      _this.tableData = res.data.content
      _this.pageSize = res.data.size
      _this.total = res.data.totalElements
    })
  },
};
</script>
